<template>
  <el-tree
    node-key="id"
    :data="treeData"
    :props="treeProps"
    class="filter-tree"
    check-strictly
    highlight-current
    check-on-click-node
    :default-expanded-keys="['0']"
    @node-click="selectCategory"
  >
  </el-tree>
</template>

<script>
import { categoryTreeData } from '@/api/mall/product/category'

export default {
  name: 'MallCategoryTree',
  data() {
    return {
      treeData: [],
      treeProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.$nextTick(() => {
        this.getTreeData()
      })
    },
    getTreeData() {
      categoryTreeData({ from: 'vue' }).then(response => {
        this.treeData = response
      }).catch(e => {})
    },
    selectCategory(data, node, component) {
      this.$emit('clickNode', data.id, data.name, node.level)
    }
  }
}
</script>
